<template>
  <div class="loginWrap">
    <el-alert :closable="false" type="success">扫描销售票据可快速确认</el-alert>
    <!--            明细-->
    <div :style="{height: height+'px'}" style="overflow: auto;padding: 0 5px;color: #515a6e;margin-right: 105px;">
      <ul>
        <li v-for="(item, index) in currentCar.load" :key="index" class="bl bb bt br">
          <div class="bb item-title">
            <table style="width: 100%;">
              <tr>
                <td><span style="color: grey;">装车日期：</span><span>{{item.billDate}}</span></td>
                <td><span style="color: grey;">车牌：</span><span>{{item.licence}}</span></td>
                <td><span style="color: grey;">司机：</span><span>{{item.driverName}}</span></td>
                <td><span style="color: grey;">送货单号：</span><span>{{item.billNo}}</span></td>
                <td style="width: 400px;">
                  <lbtn   size="small" type="info" v-if="item.state=1" @click="print(item)">票据打印</lbtn >
                  <lbtn  style="margin-left: 30px;" size="small" type="primary" v-if="item.state=1" @click="confirmCargo(item)">确认送货</lbtn >
                  <lbtn  style="margin-left: 30px;" size="small" type="danger" v-if="item.state=1" @click="delCargo(item)">整单删除</lbtn >
                </td>
              </tr>
            </table>
          </div>
          <div class="undeliver">
            <table style="width: 100%;">
              <thead>
              <tr>
                <th  class="tc  br bb" style="width: 50px;"  v-if="item.state=1" >操作</th>
                <th class="tc  br bb" style="width: 130px;">销售票号</th>
                <th class="tc  br bb" style="width: 100px;">开票日期</th>
                <th class="tc  br bb">客户</th>
                <th class="tc  br bb">送货地址</th>
                <th class="tc  br bb">商品</th>
                <th class="tc  br bb"  style="width: 70px;text-align: center;" >单位</th>
                <th class="tc  br bb"  style="width: 80px;text-align: center;" >数量</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="(it, inx) in item.cargo" :key="inx">
                <td :class="{bb:showBb(item.cargo, it, inx)}"  v-if="item.state=1"  class=" del-item br" @click="delItem(item, it)">{{ inx > 0 ? (item.cargo[inx-1].billNo === it.billNo ? '' : '删除') : '删除'}}</td>
                <td :class="{bb:showBb(item.cargo, it, inx)}"  class="  br">{{ inx > 0 ? (item.cargo[inx-1].billNo === it.billNo ? '' : it.billNo) : it.billNo}}</td>
                <td :class="{bb:showBb(item.cargo, it, inx)}"  class="  br">{{ inx > 0 ? (item.cargo[inx-1].billNo === it.billNo ? '' : it.billDate) : it.billDate}}</td>
                <td :class="{bb:showBb(item.cargo, it, inx)}"  class="  br" style="text-align: left;">{{ inx > 0 ? (item.cargo[inx-1].billNo === it.billNo ? '' : it.buName) : it.buName}}</td>
                <td :class="{bb:showBb(item.cargo, it, inx)}"  class="  br" style="text-align: left;">{{ inx > 0 ? (item.cargo[inx-1].billNo === it.billNo ? '' : it.address) : it.address}}</td>
                <td :class="{bb: item.cargo.length !== (inx + 1)}" class=" br" style="text-align: left;">{{it.invName}}</td>
                <td :class="{bb: item.cargo.length !== (inx + 1)}"  class="  br tc" style="text-align: center;" >{{it.unit}}</td>
                <td :class="{bb: item.cargo.length !== (inx + 1)}"   class=" br tr" style="padding-right: 5px;text-align: right;">{{item.transType===150602 ? 0 : it.qty}}</td>
              </tr>
              </tbody>
            </table>
          </div>
        </li>
      </ul>
    </div>
    <!--        装打印票据-->
    <doprint ref="doprint"></doprint>
  </div>
</template>
<script>
// 待配送列表明细

import Doprint from "@/views/deliver/doprint.vue";
import tool from "@/utils/tool";
import bus from "../../store/bus";
export default {
  name: "waitToGoDetail",
  components: {Doprint },
  data () {
    return {
      title: '',
      usr: {},
      carList: [],
      height: window.innerHeight - 70,
      tabHis: false,
      currentCar: {}, // 当前选中车辆
    }
  },
  created() {
    let item =  this.$route.query.item
    item = JSON.parse(item)
    this.title = '车辆【' + item.licence + '】配送详情'
    this.getCar(item)
    bus.$on('scan-ret', this.scanPs)
  },
  unmounted () {
    bus.$off('scan-ret', this.scanPs)
  },
  methods: {
    search () {
      let billNo = '150601-567990'
      this.scanPs({code: billNo})
    },
    scanPs ({code}) {
      let arr = code.split('-')
      let billId = arr[1]
      this.getCar({
        id:0,
        billId
      })
    },
    // 是否显示 下划线
    showBb (cargo, row, index) {
      let nextRow = cargo[index+1] ? cargo[index+1] : null
      if (nextRow) {
        if (row.billNo === nextRow.billNo) {
          return false
        } else {
          return true
        }
      } else {
        return false
      }
    },
    getCar (item) {
      tool.post('deliver/getCargoByCarId', {carId: item.id, type: 'undeliver', billId: item.billId}).then(ret => {
        if(ret.stat) {
          item.load = ret.data ? ret.data : []
          this.currentCar = item
        }
        else {
          item.load = ret.data ? ret.data : []
          this.currentCar = item
        }
      })
    },
    // 整单删除
    delCargo (item) {
      tool.confirm('确认删除本张派车单？', '删除提示').then(() => {
        tool.post('deliver/delCargo', {cargoId: item.id}).then(ret => {
          if (ret.stat) {
            this.getCar(this.currentCar)
          }
        })
      })
    },
    // 删除装车单中的一条
    delItem (item, it) {
      tool.confirm('确认删除该装车单中的票据？', '删除提示').then(() => {
        tool.post('deliver/delCargoItem', {cargoId: item.id, iid: it.iid}).then(ret => {
          if (ret.stat) {
            this.getCar(this.currentCar)
          }
        })
      })
    },
    // 确认送货
    confirmCargo (item) {
      tool.confirm('确认送货完成。', '送货提示').then(() => {
        tool.post('deliver/confirmCargo', {cargoId: item.id}).then(ret => {
          if (ret.stat) {
            this.getCar(this.currentCar)
          }
        })
      })
    },
    // 打印
    print (item) {
      this.$refs.doprint.print(item)
    },
  }
}
</script>
<style scoped lang="scss">
.loginWrap {
  background-color: #f8f8f9;
  text-align: center;
  .item-title {
    padding: 5px;text-align: center;font-size: 16px;font-weight: bold;color:#2db7f5;background-color: white;
  }
  .del-item {
    color: dodgerblue;
  }
}
.undeliver tr:hover {
  background-color: #f8f8f9;
}

.undeliver th {
  padding: 5px 3px;
  background-color: white;
  font-size: 13px;
}
.undeliver td {
  padding: 5px 3px;
  background-color: white;
  font-size: 14px;
}
li {margin-top: 10px;}


</style>
